<template>
    <div id="topNav" class="topNav">
      <span class="logo"></span>
			<div class="left_time">
				<span class="time_item full_time">{{ date_full }}</span>
				<span class="li_line"></span>
				<span class="time_item">{{ date_week }}</span>
			</div>
			<div class="right_bar">
				<div class="item weather_group" @mouseenter="showWeatherPlugin">
					<!-- <span class="weath_icon"></span> -->
					<svg class="icon" aria-hidden="true">
						<use :xlink:href="weather_py"></use>
					</svg>
					<span class="item">{{weather}}</span>					
					<span class="li_line"></span>
					<span class="weath_num">{{temperature}}℃</span>
				</div>
				<div class="item">
					<span class="message_icon">
						<span class="hasMsg"></span>
					</span>					
					<span class="li_line"></span>
					<span class="">
						<span class="user_img"></span>
						<span class="user_name">站点管理员</span>
					</span>
				</div>
			</div>
			<!-- 天气预报 -->
			<div v-show="showWeather" class="weather-plugin" @mouseleave="hideWeatherPlugin">
				<template>
					<div id="he-plugin-standard"></div>	
				</template>
			</div>

			<div class="tab_bar">
				<div class="tab_left tab_list">
					<div :class="[topActiveTab == 'home' || topActiveTab == 'overView' ? 'active_left':'left','tab_item']" @click="toggleTopTab('home')">总览</div>
					<div :class="[topActiveTab == 'pressureMonitor' ? 'active_left':'left','tab_item']" @click="toggleTopTab('pressureMonitor')" ref="yjlc">压力监测</div>
					<div :class="[topActiveTab == 'lossControl' ? 'active_left':'left','tab_item']" @click="toggleTopTab('lossControl')" ref="lsyc">漏损控制</div>
				</div>
				<div class="tab_right tab_list">
					<div :class="[topActiveTab == 'pipeData' ? 'active_right':'right','tab_item']" @click="toggleTopTab('pipeData')" ref="gwgis">管网GIS</div>
					<div :class="[topActiveTab == 'mointor' ? 'active_right':'right','tab_item']" @click="toggleTopTab('mointor')">水质检测</div>
					<div :class="[topActiveTab == 'sysConfiguration' ? 'active_right':'right','tab_item']" @click="toggleTopTab('sysConfiguration')">系统配置</div>
				</div>
			</div>
			<!-- 二级菜单 -->
			<div class="second_navBar">
				<ul v-if="(topActiveTab == 'pressureMonitor')" class="nav_child" ref="navChild">
					<li :class="[secondNavBarActive == 'pressureData' ? 'active':'', 'child_item']" @click.stop="goPage('pressureData')">压力数据</li>
					<li :class="[secondNavBarActive == 'pipelineBurstData' ? 'active':'', 'child_item']" @click.stop="goPage('pipelineBurstData')">爆管记录</li>
					<li :class="[secondNavBarActive == 'warningManager' ? 'active':'','child_item']" @click.stop="goPage('warningManager')">告警管理</li>
				</ul>
				<ul v-else-if="(topActiveTab == 'lossControl')" class="nav_child" ref="navChild">
                    <li :class="[secondNavBarActive == 'flows' ? 'active':'', 'child_item']" @click.stop="goPage('flows')">流量数据</li>
					<li :class="[secondNavBarActive == 'prodtctMarktingPoor' ? 'active':'', 'child_item']" @click.stop="goPage('prodtctMarktingPoor')">产销差</li>
					<li :class="[secondNavBarActive == 'yejianzuixiaoliuliang' ? 'active':'', 'child_item']" @click.stop="goPage('yejianzuixiaoliuliang')">夜间最小流量</li>
					<li :class="[secondNavBarActive == 'lossAnalyse' ? 'active':'','child_item']" @click.stop="goPage('lossAnalyse')">漏损分析</li>
                    <li :class="[secondNavBarActive == 'lossForecast' ? 'active':'','child_item']" @click.stop="goPage('lossForecast')">漏损预测</li>
				</ul>
				<ul v-else-if="(topActiveTab == 'gwgis')" class="nav_child" ref="navChild">
					<li :class="[secondNavBarActive == 'pipeDataEcharts' ? 'active':'', 'child_item']">管网可视化</li>
					<li :class="[secondNavBarActive == 'pipeData' ? 'active':'', 'child_item']" @click.stop="goPage('pipeData')">管网数据</li>
					<li :class="[secondNavBarActive == 'pipeDataEdit' ? 'active':'','child_item']">管网编辑</li>
				</ul>
			</div>    
    </div>
  </template>
  <script>
  import '@/assets/font_3814003_nusmk78crh/iconfont.js'
  import util from '../js/util';
  export default {
    name: 'topNav',
    data () {
      return {
        topActiveTab:'home',
        date_full:'',//年月日
        date_week:'',//星期几
        showChildTab:false,
		secondNavBarActive:0,
		weather:'',
		temperature:'',
		weather_py:'',
		showWeather:false,
		time:''
      }
    },
	watch:{
		topActiveTab(val){
			let letVal = '';
			//显示二级菜单
			if(val == 'pressureMonitor'){
				letVal = this.$refs.yjlc.offsetLeft;
			}
			if(val == 'lossControl'){
				letVal = this.$refs.lsyc.offsetLeft;
			}					
			if(val == 'pipeData'){
				letVal = this.$refs.gwgis.offsetLeft;
				//console.log(letVal)
			}
			this.$nextTick(()=>{
				this.$refs.navChild.style.left = letVal + 'px';
			})	
		}
	},	
    created(){
       
    },  
    mounted(){		
        this.topActiveTab = sessionStorage.getItem('tabName') || this.$route.name;
		this.initDate();
		this.initWeather();
		this.insertWeather();
    },
    methods:{
		initDate(){
			this.date_full = util.getFullDate();
			//周几
			let weenk = new Date().getUTCDay();
				if(weenk == 0){
				this.date_week = '星期天';
				}else if(weenk == 1){
				this.date_week = '星期一';
				}else if(weenk == 2){
				this.date_week = '星期二';
				}else if(weenk == 3){
				this.date_week = '星期三';
				}else if(weenk == 4){
				this.date_week = '星期四';
				}else if(weenk == 5){
				this.date_week = '星期五';
				}else if(weenk == 6){
				this.date_week = '星期六';
				}
		},
		initWeather(){
			let url = `https://restapi.amap.com/v3/weather/weatherInfo?key=22cf9f42077785d3f333c7df2a0fd104&city=510100`
			this.$axios.get(url).then(res => {
				this.weather = res.data.lives[0].weather;
				this.temperature = res.data.lives[0].temperature;
				this.weather_py = `#icon-${this.convertName(this.weather)}`;
			})
		},
		insertWeather(){
            window.WIDGET = {
				"CONFIG": {
					"layout": "1",
					"width": "480",
					"height": "200",
					"background": "2",
					"dataColor": "434343",
					"language": "zh",
					"aqiColor": "434343",
					"borderRadius": "5",
					"key": "31fd6a143b1c4e9ca4b9161468dd9ba3"
				}
			}
			let script = document.createElement("script");
			script.src =
			"https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
			document.getElementsByTagName("head")[0].appendChild(script);
		},
		showWeatherPlugin(){
			this.showWeather = true;
		},
		hideWeatherPlugin(){
			this.showWeather = false;
		},
    	toggleTopTab(_path){			
			this.topActiveTab = _path;
			this.secondNavBarActive = 0;
			this.$router.push({
				path:_path
			})
            sessionStorage.setItem('tabName',_path);
		},
      	showChild(parent){
			this.$refs.navChild.style.left = 34 +'px';
			this.showChildTab = true;
      	},
      	hideChild(){
        	this.showChildTab = false;
		},
		goPage(_path){
			this.secondNavBarActive = _path;
			if(_path){
                this.$router.push({
                    path:_path
                })
            }
        },
		//汉字转拼音
		convertName(val){    
            let weather_pinyin = this.$pinyin.getFullChars(val).toLowerCase();
			return weather_pinyin;
       }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: text-bottom;
	fill: currentColor;
	overflow: hidden;
	}
.topNav {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 100;
		width: 100%;
		min-width: 1920px;
		padding-top:8px;
		height: 82px !important;
		background: url('../assets/image/top_bg.png') no-repeat;
		background-position: 50% 0%;
		    // background-color: rgba(10, 38, 54,0.7);
		.logo {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: 100%;
			height: 100%;
			background: url('../assets/image/logo_title.png') no-repeat 50% 15%;
		}

		.left_time {
			position: absolute;
			left: 15px;
			top: 8px;
			width: 210px;
			height: 32px;
			display: flex;
			align-content: space-between;
			align-items: center;
			.time_item {
				// width: 80px;
				font-family: 'DIN Next LT Pro';
				font-style: normal;
				font-weight: 700;
				font-size: 14px;
				line-height: 31px;
				color: rgba(255, 255, 255, 0.8);
				padding: 0 15px;
			}
			
		}
		.weather-plugin{
			z-index: 1000;
			position: absolute;
			right: 15px;
			top: 38px;
			/deep/ #he-plugin-standard{
				background-color: rgba(255, 255, 255, 0.85) !important;
				font-size: 16px !important;
			}
		}
		.right_bar {
			position: absolute;
			right: 15px;
			top: 8px;
			// width: 360px;
			height: 32px;
			// border: 1px solid green;
			display: flex;
			align-content: space-between;

			.weath_icon{
				position: absolute;
				top: 6px;
    			left: 20px;
				display: inline-block;
				width: 18px;
				height: 18px;
				background: url('~@/assets/image/天气@1x.png');
			}
			.weather_group{
				cursor: pointer;
			}
			.item {
				text-align: center;
				font-family: 'DIN Next LT Pro';
				font-style: normal;
				font-weight: 700;
				font-size: 14px;
				line-height: 17px;
				color: rgba(255, 255, 255, 0.8);
				width: 175px;
				line-height: 30px;
				span{
					margin: 0 5px;
					box-sizing:content-box;
				}
			}
			.message_icon{
				display: inline-block;
				width: 14px;
				height: 16px;
				background: url('~@/assets/image/message.png');
				vertical-align: middle;
				cursor: pointer;
				position: relative;
				.hasMsg{
					display: inline-block;
					width: 5px;
					height: 5px;
					border-radius: 50%;
					background-color: red;
					position: absolute;
					top: 1px;
					right: -8px;
				}
			}
			.user_img{
				display: inline-block;
				width: 24px;
				height: 24px;
				background: url('~@/assets/image/user.png');
				background-size: 100% 100%;
				vertical-align: middle;
				cursor: pointer;
			}
		}

		.tab_bar {
			position: absolute;
			width: 100%;
			height: 40px;
			bottom: 0px;
			left: 0px;
			display: flex;
			justify-content: space-around;

			.tab_list {
				.tab_item {
					margin: 0 12px;
					display: inline-block;
					width: 178px;
					height: 40px;
					font-family: 'YouSheBiaoTiHei';
					// font-style: normal;
					font-weight: 700;
					font-style: italic;
					font-size: 18px;
					line-height: 23px;
					color: rgba(255, 255, 255, 0.6);
					line-height: 44px;
					text-align: center;
					cursor: pointer;
				}

				.left {
					// padding-right: 220px;
					background: url('../assets/image/topbar/tab_left.png') no-repeat;
				}
				.active_left {
					// padding-right: 220px;
					background: url('../assets/image/topbar/active_tab_left.png') no-repeat;
					// color:rgba(255, 184, 0, 1);
					color:#B9EDFF;
				}

				.right {
					// padding-left: 220px;
					background: url('../assets/image/topbar/tab_right.png') no-repeat;

				}
				.active_right {
					// padding-left: 220px;
					background: url('../assets/image/topbar/active_tab_right.png') no-repeat;
					// color:rgba(255, 184, 0, 1);
					color:#B9EDFF;
				}
			}
			.tab_left {
				padding-right: 220px;
        display: flex;

        .el-menu{
          .el-menu-item,.el-submenu {
            width: 178px;
            height: 44px;
            background: url('../assets/image/topbar/tab_left.png') no-repeat;
            // line-height: 32px;
            font-family: 'YouSheBiaoTiHei';
            // font-style: normal;
            font-weight: 700;
            font-style: italic;
            font-size: 18px;
            line-height: 23px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 44px;
            text-align: center;
          }
          .el-submenu__title{
            font-family: 'YouSheBiaoTiHei';
            // font-style: normal;
            font-weight: 700;
            font-style: italic;
            font-size: 18px;
            line-height: 23px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 44px;
            text-align: center;
          }
        }
        .el-menu.el-menu--horizontal{
          background: transparent;
          border: none;
        }

        /deep/.el-menu--horizontal>.el-submenu .el-submenu__title{
          font-family: 'YouSheBiaoTiHei';
            // font-style: normal;
            font-weight: 700;
            font-style: italic;
            font-size: 18px;
            line-height: 23px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 44px;
            text-align: center;
        }
        /deep/.el-submenu__title:hover{
          background: transparent;
        }
        
	}

			.tab_right {
				padding-left: 220px;
        		display: flex;
			}
		}
		.second_navBar{
			position: absolute;
			top: 85px;
			width: auto;
			height: 35px;
			cursor: pointer;
			li{
				display: inline-block;
			}
		}

    .nav_child{
      position: relative;
      top:0px;
      left:0px;
      // display: none;
      .child_item{
        width: 130px;
        height: 30px;      
        background: url('~@/assets/image/topbar/tab_left.png');
        background-size: 100% 100%;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        line-height: 34px;
        text-align: center;
        margin-top: 10px;
      }

	  .active{		
        background: url('~@/assets/image/topbar/active_tab_left.png');
        background-size: 100% 100%;
		// color:rgba(255, 184, 0, 1);
		color:#B9EDFF;
	  }
    }
	}
  </style>
  